<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhht' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        /*.layui-form-label {*/
        /*    width: 180px;*/
        /*}*/
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content" style="height: 100%;">
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
                    <form:form commandName="order" method="post" id="form" class="layui-form">

                        <input type="hidden" name="_method" value="${_method}">
                        <form:hidden path="id"/>
                        <form:hidden path="data"/>
                        <form:hidden path="note"/>
                        <form:hidden path="isCloudStoreDelivery"/>

                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                            <legend><fmt:message key='zskc' /></legend>
                        </fieldset>

                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th style="border-color: black;"><fmt:message key='fhwpmc' /></th>
                                <th style="border-color: black;"><fmt:message key='hh' /></th>
                                <th style="border-color: black;"><fmt:message key='spsku' /></th>
                                <th style="border-color: black;"><fmt:message key='dqkc' /></th>
                                <th style="border-color: black;"><fmt:message key='ddsl' /></th>
                                <th style="border-color: black;color:red;"><fmt:message key='fhsl*' /></th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${order.details}" var="detail">
                                <tr>
                                    <td style="border-color: black;">${detail.goodsName}</td>
                                    <td style="border-color: black;">${detail.productNo}</td>
                                    <td style="border-color: black;">${detail.specs}</td>
                                    <td style="border-color: black;">${detail.sku.store}</td>
                                    <td style="border-color: black;">${detail.quantity}</td>
                                    <td style="border-color: black;">
                                        <input type="text" class="layui-input feijin-quantity" value="${detail.quantity}" data-quantity="${detail.quantity}" data-id="${detail.id}" lay-verify="required"/>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                        <c:if test="${not empty relevancesList}">

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend><fmt:message key='yckc' /></legend>
                            </fieldset>

                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th style="border-color: black;"><fmt:message key='gysmc' /></th>
                                    <th style="border-color: black;"><fmt:message key='spmc' /></th>
                                    <th style="border-color: black;"><fmt:message key='spgg' /></th>
                                    <th style="border-color: black;"><fmt:message key='ycsl' /></th>
                                    <th style="border-color: black;"><fmt:message key='fhsl' /></th>
                                    <th style="border-color: black;"><fmt:message key='yf' /></th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${relevancesList}" var="relevance">

                                    <tr>
                                        <td style="border-color: black;">${relevance.cloudStoreGoods.supplier.shopName}</td>
                                        <td style="border-color: black;">${relevance.cloudStoreGoods.goods.name}</td>
                                        <td style="border-color: black;">${relevance.cloudStoreGoods.sku.skuNames}</td>
                                        <td style="border-color: black;">${relevance.cloudStoreGoods.quantity}</td>
                                        <td style="border-color: black;">
                                            <input type="text" class="layui-input feijin-cloudstore-quantity" data-id="${relevance.cloudStoreGoods.id}"/>
                                        </td>
                                        <td style="border-color: black;">
                                            <b id="feijin-cloudstore-price-${relevance.cloudStoreGoods.id}"></b>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>

                        </c:if>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='wlgs' /></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <select id="expressCode" name="expressCode" lay-verify="required" class="layui-input">
                                    <option value=""><fmt:message key='qxz' /></option>
                                    <c:forEach items="${expresses}" var="item">
                                        <option value="${item.expressCompanyCode}">${item.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='kddh' /></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <form:input path="expressesNo" lay-verify="required" class="layui-input"/>
                            </div>
                        </div>


                        <div class="layui-form-item" style="display: none;">
                            <label for="" class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <input type="button" value="确定" lay-submit id="submit" lay-filter="submit" class="layui-btn">
                            </div>
                        </div>
                    </form:form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    layui.use(['form'], function () {

        var form = layui.form;

        $(".feijin-cloudstore-quantity").focusout(function () {
            var id = $(this).attr("data-id");
            var count = $(this).val();

            $("#feijin-cloudstore-price-" + id).html("计算中...");

            $.ajax({
                url: "${web_domain}/merchant/order/queryFreightPrice?id=${order.id}&cloudStoreId=" + id + "&count=" + count,
                type: "get",
                dataType: "json",
                success: function (result) {
                    if (result.status) {
                        $("#feijin-cloudstore-price-" + id).html(result.price);
                    }
                }
            });


        });

        form.on('submit(submit)', function (data) {

            var deliverySelf = [];
            var deliveryCloudStore = [];
            var msg = "";

            $(".feijin-quantity").each(function (index, item) {
                var id = $(item).attr("data-id");
                var quantity = $(item).val();
                var oldQuantity = $(item).attr("data-quantity");
                if (quantity - oldQuantity > 0) {
                    msg = "<fmt:message key='zykcfhslbddydds' />";
                }
                deliverySelf.push(id + ":" + quantity);
            });

            if (msg) {
                layer.msg(msg);
                return false;
            }


            if (!$("#expressCode").val()) {
                layer.msg("<fmt:message key='qxzwlgs' />");
                return false;
            }

            $(".feijin-cloudstore-quantity").each(function (index, item) {

                var id = $(item).attr("data-id");
                var quantity = $(item).val();

                if (quantity != "") {
                    $("#isCloudStoreDelivery").attr("value", 1);
                    deliveryCloudStore.push(id + ":" + quantity);
                }


            });

            $("#data").attr("value", deliverySelf.join(";"));
            $("#note").attr("value", deliveryCloudStore.join(";"));


            $("#form").ajaxSubmit({

                success: function (res) {
                    if (res.status) {

                        if (res.id > 0) {

                            layer.open({
                                type: 2
                                , title: '<fmt:message key='zfthdyf' />'
                                , content: '${web_domain}/merchant/billLading/' + res.id + '/pay'
                                , maxmin: true
                                , area: ['97%', '97%']
                                , btn: ['<fmt:message key='gb' />']
                                , yes: function (index, layero) {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.$("#search").click();
                                }, no: function (index, layero) {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.$("#search").click();
                                }
                            });

                        } else {

                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();

                        }


                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    });
</script>
</body>
</fmt:bundle>
</html>